<template>

	<view>
		<!-- <lodingHtml v-if="lodingShow"></lodingHtml> -->
		<view class="box">

			<!-- 搜索 -->
			<!-- 教师 -->
			<view class="tab">
				<view>
					<view style="margin-right: 67rpx; margin-left: 16rpx;" :class="current===index ? 'one' :'another'"
						@click="change(index)" v-for="(item,index) in list2" :key="index">
						{{item.name}}
					</view>
				</view>
				<view class="more" @tap="saixuan">
					筛选
					<image style="width: 23rpx; height: 21rpx; margin-left: 10rpx;" src="../../static/image/more.png"
						mode=""></image>
				</view>
			</view>
			<view class="tioajian" v-if="vuex_select" style="color: #FF8D5F;font-size: 24rpx;padding: 30rpx 30rpx 0rpx 30rpx;">
			<text v-if="vuex_select.cityName">{{vuex_select.cityName}}/</text>
			<text v-if="vuex_select.countName">{{vuex_select.countName}}/</text>
			<text v-if="vuex_select.genderName">{{vuex_select.genderName}}/</text>
			<text v-if="vuex_select.teacherTypeName">{{vuex_select.teacherTypeName}}/</text>
			<text v-if="vuex_select.stageName">{{vuex_select.stageName}}/</text>
			<text v-if="vuex_select.subjectName">{{vuex_select.subjectName}}</text>
			</view>
			<view class="search">
				<u-search bg-color="#eeeeee" @change="searchPage" :show-action="false" v-model="keyword" @search="searchPage" placeholder="搜Id/姓名/学校/专业/年级"></u-search>
			</view>
			<view>
				<view style="padding: 0 30rpx;">
					<view class="teacher-item" v-for="item in teacList" :key="item.id" @tap="goDetail(item.id)">
						<view class="boxs">
							<view class="left">
								<image style="width: 154rpx; height: 205rpx;border-radius: 20rpx;"
									:src="item.bareheadedPhoto" mode="scaleToFill">
								</image>
								<p>ID：{{item.code}}</p>
							</view>
							<view class="center">
								<view style="margin-bottom: 15rpx;">
									<text class="u-line-1" >{{item.realName}}</text>
									<image v-if="item.gender==2" style="width: 31rpx;
					height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/women.png" mode=""></image>
									<image v-else style="width: 31rpx;
					height: 31rpx; vertical-align: middle; margin-left: 17rpx;" src="/static/image/man.png" mode=""></image>
								</view>
								<p class="school" style="width: 300rpx;display: block;">{{item.graduateSchool}}-{{item.speciality}}</p>
								<view style="display: flex; align-items: center;position: absolute;">
									<p class="education" style="font-size: 26rpx;color: #444444;">
										{{item.categoryList[0].categoryName}}

									</p>
								</view>

								<view style="display: flex;align-items: center;margin-top: 50rpx;">
									<view :class="'grade'+ items.teachLv" class="grade"
										v-for="(items,index) in item.teacherCategoryConfigVOList">
										{{items.teachSubjectDetail}}
									</view>
								</view>
							</view>
						</view>
						<view class="right">
							<view>
								<image style="margin-right: 7rpx;" src="/static/image/rz.png" mode=""></image>
								<text>{{item.certification?'已认证' : '未认证'}}</text>
							</view>
							<view style="margin-top: 182rpx;position: absolute;right: 50rpx;">
								<image style="margin-right: 7rpx;width: 15rpx;
						height: 19rpx;" src="/static/image/address.png" mode=""></image>
								<text style="color: #000;">{{item.distance}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="teacList.length===0" text="数据为空,请重新筛选" mode="list"></u-empty>

		</view>
		<!-- <tabbarLevel current="1"></tabbarLevel> -->
	</view>
</template>

<script>
	// import lodingHtml from '@/common/home/index.vue'
	// import tabbarLevel from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			// tabbarLevel,
			// lodingHtml
		},
		data() {
			return {
				keyword:'',
				// lodingShow: true,
				current: 0,
				list2: [{
					name: '最新'
				}, {
					name: '附近'
				}],
				teacList: [],
				queryType: 1,
				lat: '',
				lgt: '',
				pageTotal: 0,
				pageCurrent: 1,
				pageSize: 10,
				city:'',
				cityId:''
			}
		},
		onShow() {
			const vm = this
				vm.city = uni.getStorageSync('city')
			// vm.lodingShow = true
			// vm.teacList = []
			vm.pageCurrent = 1
			vm.lat = uni.getStorageSync('lat')
			vm.lgt = uni.getStorageSync('lgt')
			vm.getTeachPage()
			vm.getCity()
		
			// vm.lodingShow = false
		},
		onReachBottom() {
			if (this.pageCurrent < this.pageTotal) {
				this.pageCurrent += 1;
				this.getTeachPage()

			}
		},
		methods: {
			searchPage(){
				this.pageCurrent=1
				this.getTeachPage()
			},
			async getCity() {
			
				const res = await this.$u.api.getCity({
					cityName: this.city
				})
				this.cityId = res[0].code
				this.pageCurrent = 1
				this.getTeachPage()
			},
			async getTeachPage() {
				const res = await this.$u.api.getTeachPage({
					current: this.pageCurrent,
					size: this.pageSize,
					queryType: this.queryType,
					lat: this.lat,
					lgt: this.lgt,
					cityId: this.vuex_select.cityId ? this.vuex_select.cityId : this.cityId,
					gender: this.vuex_select.gender ? this.vuex_select.gender : '',
					subjectId: this.vuex_select.subjectId ? this.vuex_select.subjectId : '',
					teacherType: this.vuex_select.teacherType ? this.vuex_select.teacherType : '',
					countyId: this.vuex_select.countyId ? this.vuex_select.countyId : '',
					keyword:this.keyword
				})
				if (this.pageCurrent == 1) {
					this.teacList = []
				}
				this.teacList = this.teacList.concat(res.records)
				this.teacList.map(item => {
					// console.log(item);
					if (item.distance >= 1000) {
						item.distance = (item.distance / 1000).toFixed(2) + 'km'
					} else if (item.distance < 1000) {
						item.distance = item.distance + 'm'
					}
				})
				this.pageTotal = res.pages
			},
			change(index) {
				uni.showLoading({
					title: '加载中'
				})
				this.current = index;
				this.queryType = index + 1
				this.pageCurrent = 1

				this.getTeachPage()
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			goDetail(teacherId) {
				uni.navigateTo({
					url: `/pages/contradict/teacherDetail?teacherId=${teacherId}`
				})
			},
			saixuan() {
				uni.navigateTo({
					url: './saixuan'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.box {
		.search {
			padding: 40rpx 35rpx 30rpx 35rpx;
		}

		.tab {
			margin-top: 22rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				display: flex;
				align-items: center;

				.one {
					width: 67rpx;
					text-align: center;
					position: relative;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6054;

					&::after {
						content: '';
						width: 67rpx;
						height: 5rpx;
						background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
						border-radius: 3rpx;
						position: absolute;
						bottom: -11rpx;
						left: -10rpx;
					}
				}

				.another {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.more {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

		}


		.teacher-item {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding: 0 20rpx 0 32rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-radius: 35rpx;

			.boxs {
				display: flex;

				.left {
					text-align: center;
					margin-top: 30rpx;
					margin-right: 35rpx;

					p {
						margin-top: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}

				.center {
					margin-top: 40rpx;

					view {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
						display: flex;
						align-items: center;

					}

					p {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #9D9D9D;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.grade {
						margin-top: 19rpx;
						width: 90rpx;
						height: 35rpx;
						line-height: 45rpx;
						padding-left: 12rpx;

						border-radius: 5rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-right: 10rpx;
						background: #ffbf55;
					}

					.grade18 {
						background: #ffbf55;
					}

					.grade19 {
						background: #be57ff;
					}

					.grade20 {
						background: #6a57ff;
					}
				}
			}


			.right {

				margin-top: 56rpx;

				view {
					display: flex;
					align-items: center;

					image {
						vertical-align: middle;
						width: 25rpx;
						height: 25rpx;
					}

					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF6054;
					}
				}

			}
		}
	}
</style>